<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>

    </style>
</head>
<body>
    <div id="app">
        <!--
        双大括号插值：{{}}
        v-text
        渲染结果类似，都是会以文本类型进行渲染
        1)双大括号在渲染结果之前，会有编译之前的文本显示，v-text是没有这种现象的
        2)双大括号更灵活，中间是可以添加内容的，v-text是只能渲染data中的数据，中间不允许插入内容
        -->
        <p>--------{{a}}--------{{}}渲染还能插入其他值--------</p>
        <!-- 没法插入------值 -->
        <p v-text="a">-------- v-text没法插入 --------</p>
        <!--
        双大括号和v-text它俩的渲染方式和v-html有本质不同，v-html会识别模板
        和v-text类似的是v-html也不允许在元素中间随意插值
        -->
        <p v-html='a'>-------- v-html也没法插入 --------</p>
    </div>
    <script src = "js/vue.js"></script>
    <script>
        var vue = new Vue({
            el: "#app",
            data: {
                a:'<h1>我是要插值的内容</h1>'
            }
        })
    </script>
</body>
</html>